import React from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import PropTypes from 'prop-types';
import s from './Modal.less';

const stopPropagation = e => {
    e.stopPropagation();
};

export default function Modal({ open, onClose, children }) {
    return (
        <CSSTransitionGroup
            className={s.root}
            component="div"
            transitionName={{
                enter: s.enter,
                enterActive: s.enterActive,
                leave: s.leave,
                leaveActive: s.leaveActive,
            }}
            transitionEnterTimeout={200}
            transitionLeaveTimeout={200}
        >
            {open && (
                <div className={s.layer} onClick={onClose}>
                    <div className={s.content} onClick={stopPropagation}>
                        {children}
                    </div>
                </div>
            )}
        </CSSTransitionGroup>
    );
}

Modal.defaultProps = {
    open: false,
};

Modal.propTypes = {
    open: PropTypes.bool,
    onClose: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired,
};
